<template>
	<div>
		<a-card>
			<div style="display: flex; flex-direction: column">
				<a-space style="margin-bottom: 10px">
					<a-button-group>
						<a-button
							v-for="(value, type) in paperTypes"
							:type="curPaperType === type ? 'primary' : 'info'"
							@click="setPaper(type, value)"
							:key="type"
						>
							{{ type }}
						</a-button>
						<a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">
							<div>
								<a-input-group compact style="margin: 10px">
									<a-input type="number" v-model="paperWidth" style="width: 100px; text-align: center" placeholder="宽(mm)" />
									<a-input
										style="width: 30px; pointer-events: none; background-color: #ffffff; border-left: 0"
										placeholder="~"
										disabled
									/>
									<a-input
										type="number"
										v-model="paperHeight"
										style="width: 100px; text-align: center; border-left: 0"
										placeholder="高(mm)"
									/>
								</a-input-group>
								<a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>
							</div>
							<a-button :type="'other' == curPaperType ? 'primary' : ''">自定义纸张</a-button>
						</a-popover>
					</a-button-group>
				</a-space>
			</div>
		</a-card>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const paperPopVisible = ref<boolean>(false);
const paperWidth = ref<number>(210);
const paperHeight = ref<number>(296.6);
const curPaperType = ref<string>("A4");
const paperTypes = {
	A3: {
		width: 420,
		height: 296.6
	},
	A4: {
		width: 210,
		height: 296.6
	},
	A5: {
		width: 210,
		height: 147.6
	},
	B3: {
		width: 500,
		height: 352.6
	},
	B4: {
		width: 250,
		height: 352.6
	},
	B5: {
		width: 250,
		height: 175.6
	}
};

const setPaper = (type: string, value: any) => {
	console.log(type, value);
	curPaperType.value = type;
	paperWidth.value = value.width;
	paperHeight.value = value.height;
	paperPopVisible.value = false;
};
const otherPaper = () => {};
</script>
<style lang="less" scoped></style>
